<template>
	<div class="cart">
		<!-- 导航  -->
		<nav-bar class="nav-bar"><div slot="center">商品({{cartLength}})</div></nav-bar>
		<!-- 商品列表 -->
		
		<cart-list/>
		<!-- 底部汇总 -->
		<cart-bottom-bar/>
	</div>
</template>

<script>
	import NavBar from 'components/common/navbar/NavBar.vue'
	
	import CartBottomBar from './childComps/CartBottomBar.vue'
	import CartList from'./childComps/CartList.vue'
	
	import { mapGetters } from 'vuex'

	export default{
		name:'Cart',
		components: {
			NavBar,
			CartList,
			CartBottomBar
		},
		computed: {
			//两种语法
			...mapGetters(['cartLength'])
			
			
		}
	}
</script>

<style scoped>
	
	.nav-bar{
		background: #ff5577;
		color: #fff;
		font-size: 20px;
		font-weight: 200;
		/* 为了在使用原生滚动时，底部导航栏不随着内容滚动 */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
	}
	
</style>
